Ajax এর মাধ্যমে Pagination তৈরি করা (Creating Pagination with Ajax)

Web Development - অ্যাজাক্স (Ajax) - NCTB BOOK

Please, contribute to add content into Ajax এর মাধ্যমে Pagination তৈরি করা (Creating Pagination with Ajax).

Ajax এর মাধ্যমে Dynamic Pagination তৈরি

Ajax ব্যবহার করে Dynamic Pagination তৈরি করা একটি আধুনিক পদ্ধতি, যা বড় ডাটাসেটকে পেজে ডায়নামিক্যালি লোড করে দেখায়। এই পদ্ধতিতে, Ajax রিকোয়েস্টের মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করা হয় এবং ব্যবহারকারী যখন পেজ নেভিগেট করে, তখন নতুন ডেটা লোড হয় পেজ রিফ্রেশ ছাড়াই। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে এবং ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ করে তোলে।

উদাহরণ: Ajax এর মাধ্যমে Dynamic Pagination

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Pagination Example</title>
    <style>
        /* Pagination স্টাইল */
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin: 2px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Employee List</h1>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        <!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
    </div>

    <script>
        // বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
        let currentPage = 1;
        const rowsPerPage = 5;

        // পেজ লোড হলে ডেটা লোড করা
        document.addEventListener('DOMContentLoaded', function() {
            fetchData(currentPage);
        });

        // Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
        function fetchData(page) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    renderTable(response.data);
                    renderPagination(response.totalPages, page);
                }
            };

            xhr.send();
        }

        // টেবিল রেন্ডার করার ফাংশন
        function renderTable(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // পেজিনেশন রেন্ডার করার ফাংশন
        function renderPagination(totalPages, currentPage) {
            var pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            for (let i = 1; i <= totalPages; i++) {
                var button = document.createElement("button");
                button.textContent = i;
                if (i === currentPage) {
                    button.disabled = true;
                }
                button.onclick = function() {
                    fetchData(i);
                };
                pagination.appendChild(button);
            }
        }
    </script>
</body>
</html>

২. PHP স্ক্রিপ্ট (fetch_employees.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 5;
$offset = ($page - 1) * $rowsPerPage;

// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
    "data" => $employees,
    "totalPages" => $totalPages
]);

$stmt->close();
$conn->close();
?>

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

HTML এবং JavaScript:
- পেজ লোড হলে fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।
- fetchData() রিকোয়েস্ট পাঠানোর সময় বর্তমান পেজ নম্বর এবং প্রতি পেজে কতটি রেকর্ড (rows) দেখাতে হবে সেটি প্যারামিটার হিসেবে পাঠায়।
- রেসপন্স সফল হলে, JSON ডেটা প্রসেস করে renderTable() এবং renderPagination() ফাংশন কল হয়।
PHP স্ক্রিপ্ট:
- PHP স্ক্রিপ্ট ইনপুট প্যারামিটার (পেজ এবং rowsPerPage) গ্রহণ করে এবং ডাটাবেসে কুয়েরি চালিয়ে ডেটা রিটার্ন করে।
- PHP JSON ফরম্যাটে রেসপন্স রিটার্ন করে যাতে JavaScript এটি প্রসেস করতে পারে।
Pagination এবং Table Rendering:
- renderTable() ফাংশন Ajax থেকে প্রাপ্ত ডেটা ব্যবহার করে টেবিল আপডেট করে।
- renderPagination() ফাংশন টোটাল পেজ সংখ্যা এবং বর্তমান পেজ অনুযায়ী পেজিনেশন বাটন তৈরি করে।

সুবিধা:

Ajax এর মাধ্যমে Dynamic Pagination: পেজ রিফ্রেশ ছাড়াই ব্যবহারকারী পেজ নেভিগেট করতে পারে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
ডায়নামিক ডেটা আপডেট: JavaScript এর মাধ্যমে Ajax রিকোয়েস্টের মাধ্যমে ডেটা এবং পেজিনেশন ডায়নামিক্যালি আপডেট হয়।
সিম্পল এবং কার্যকর পদ্ধতি: JavaScript, PHP, এবং MySQL ব্যবহার করে সহজে Dynamic Pagination ইমপ্লিমেন্ট করা যায়।

Content added By

Md. Nasir Uddin (Raju)

Large Data Set এর জন্য Pagination Handling

Ajax ব্যবহার করে Large Data Set এর জন্য Pagination Handling করা একটি গুরুত্বপূর্ণ পদ্ধতি, বিশেষ করে যখন আপনার ডাটাবেসে অনেক ডেটা থাকে এবং আপনি ইউজার ইন্টারফেসে এটি ডায়নামিক্যালি এবং দ্রুত লোড করতে চান। Ajax এর মাধ্যমে Pagination পরিচালনা করার সময়, প্রতিবার নতুন পেজে ক্লিক করলে নতুন ডেটা লোড করা হয়, যা পেজ রিফ্রেশ ছাড়াই ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

Large Data Set এর জন্য Pagination Handling এর কী পয়েন্ট:

Ajax Based Pagination: প্রতিবার যখন ব্যবহারকারী পেজ নম্বর বা নেভিগেশন বাটনে ক্লিক করে, তখন Ajax রিকোয়েস্টের মাধ্যমে ডেটা ফেচ করা হয়, যা পেজ রিফ্রেশ ছাড়াই ডেটা লোড করে।
Server-Side Data Fetching: ডেটাবেস থেকে শুধুমাত্র নির্দিষ্ট রেঞ্জের ডেটা (প্রতি পেজে কয়েকটি রেকর্ড) ফেচ করা হয়, যা সার্ভার এবং ক্লায়েন্ট সাইডের পারফরম্যান্স উন্নত করে।
Dynamic Pagination Controls: পেজিনেশন বাটনগুলো ডায়নামিক্যালি তৈরি এবং আপডেট করা হয়, যাতে ইউজার ইন্টারফেসে ইউজার সহজেই নেভিগেট করতে পারে।

উদাহরণ: Ajax এর মাধ্যমে Large Data Set এর Pagination Handling

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Large Data Set Pagination Example</title>
    <style>
        /* Pagination styling */
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin: 2px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Employee List</h1>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        <!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
    </div>

    <script>
        // বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
        let currentPage = 1;
        const rowsPerPage = 10;

        // পেজ লোড হলে ডেটা লোড করা
        document.addEventListener('DOMContentLoaded', function() {
            fetchData(currentPage);
        });

        // Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
        function fetchData(page) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    renderTable(response.data);
                    renderPagination(response.totalPages, page);
                }
            };

            xhr.send();
        }

        // টেবিল রেন্ডার করার ফাংশন
        function renderTable(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // পেজিনেশন রেন্ডার করার ফাংশন
        function renderPagination(totalPages, currentPage) {
            var pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            for (let i = 1; i <= totalPages; i++) {
                var button = document.createElement("button");
                button.textContent = i;
                if (i === currentPage) {
                    button.disabled = true;
                }
                button.onclick = function() {
                    fetchData(i);
                };
                pagination.appendChild(button);
            }
        }
    </script>
</body>
</html>

২. PHP স্ক্রিপ্ট (fetch_employees.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;

// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
    "data" => $employees,
    "totalPages" => $totalPages
]);

$stmt->close();
$conn->close();
?>

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

HTML এবং JavaScript:

পেজ লোড হলে fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।
প্রতিটি পেজ লোডের সময় Ajax রিকোয়েস্ট ডাটাবেস থেকে নির্দিষ্ট পরিমাণ ডেটা (per page limit) লোড করে এবং JSON রেসপন্স রিটার্ন করে।
renderTable() ফাংশন Ajax থেকে প্রাপ্ত ডেটা ব্যবহার করে টেবিল আপডেট করে।
renderPagination() ফাংশন ডায়নামিক্যালি পেজিনেশন বাটন তৈরি করে।

PHP স্ক্রিপ্ট:

PHP স্ক্রিপ্টে ডাটাবেসে SQL কুয়েরি চালানো হয়েছে যা বর্তমান পেজ এবং প্রতি পেজে কতটি রেকর্ড ফেচ করতে হবে তা নির্ধারণ করে।
মোট পেজ সংখ্যা গণনা করে এবং JSON রেসপন্সের মাধ্যমে ডেটা এবং মোট পেজ সংখ্যা রিটার্ন করে।

Large Data Set এর জন্য Ajax Pagination এর সুবিধা:

পেজ রিফ্রেশ ছাড়াই ডেটা লোড: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডেটা লোড করা যায়, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
Efficient Data Fetching: সার্ভার সাইডে নির্দিষ্ট সংখ্যক ডেটা (per page) ফেচ করা হয়, যা সার্ভার এবং ক্লায়েন্ট সাইডের পারফরম্যান্স উন্নত করে।
ডায়নামিক ইন্টারফেস: পেজিনেশন বাটনগুলো ডায়নামিক্যালি তৈরি এবং আপডেট হয়, যাতে ব্যবহারকারী সহজেই পেজ নেভিগেট করতে পারে।

Content added By

Md. Nasir Uddin (Raju)

Ajax এবং PHP এর মাধ্যমে Server Side Pagination

Ajax এবং PHP ব্যবহার করে Server Side Pagination তৈরি করা একটি কার্যকর পদ্ধতি, যা ডাটাবেসে বড় ডেটাসেটের সাথে কাজ করার সময় খুবই গুরুত্বপূর্ণ। Server Side Pagination ডাটাবেস থেকে প্রতিবার শুধুমাত্র নির্দিষ্ট পরিমাণে ডেটা ফেচ করে, যা সার্ভার এবং ক্লায়েন্ট উভয়ের পারফরম্যান্স উন্নত করে।

Server Side Pagination এর কী পয়েন্ট:

Ajax-Based Pagination: প্রতিবার যখন ব্যবহারকারী পেজ নম্বর বা নেভিগেশন বাটনে ক্লিক করে, তখন Ajax এর মাধ্যমে একটি রিকোয়েস্ট সার্ভারে পাঠানো হয়। সার্ভার নির্দিষ্ট পেজের জন্য ডেটা লোড করে JSON ফরম্যাটে রেসপন্স রিটার্ন করে, যা পেজ রিফ্রেশ ছাড়াই ক্লায়েন্ট সাইডে রেন্ডার হয়।
Dynamic Pagination Controls: Pagination বাটনগুলো ডায়নামিক্যালি তৈরি এবং আপডেট করা হয়, যা ব্যবহারকারীকে সহজে নেভিগেট করতে সহায়তা করে।
PHP এবং SQL Integration: PHP এবং MySQL এর মাধ্যমে ডাটাবেস কুয়েরি করে প্রতিটি পেজের ডেটা ফেচ করা হয়, যা কাস্টমাইজ করা সহজ।

উদাহরণ: Ajax এবং PHP এর মাধ্যমে Server Side Pagination

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Side Pagination Example</title>
    <style>
        /* Pagination styling */
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin: 2px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Employee List</h1>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        <!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
    </div>

    <script>
        // বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
        let currentPage = 1;
        const rowsPerPage = 10;

        // পেজ লোড হলে ডেটা লোড করা
        document.addEventListener('DOMContentLoaded', function() {
            fetchData(currentPage);
        });

        // Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
        function fetchData(page) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    renderTable(response.data);
                    renderPagination(response.totalPages, page);
                }
            };

            xhr.send();
        }

        // টেবিল রেন্ডার করার ফাংশন
        function renderTable(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // পেজিনেশন রেন্ডার করার ফাংশন
        function renderPagination(totalPages, currentPage) {
            var pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            for (let i = 1; i <= totalPages; i++) {
                var button = document.createElement("button");
                button.textContent = i;
                if (i === currentPage) {
                    button.disabled = true;
                }
                button.onclick = function() {
                    fetchData(i);
                };
                pagination.appendChild(button);
            }
        }
    </script>
</body>
</html>

২. PHP স্ক্রিপ্ট (fetch_employees.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

// ডাটাবেস কানেকশন সেটআপ
$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;

// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
    "data" => $employees,
    "totalPages" => $totalPages
]);

$stmt->close();
$conn->close();
?>

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

HTML এবং JavaScript:
- পেজ লোড হলে fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।
- Ajax রিকোয়েস্ট পাঠানোর সময় বর্তমান পেজ নম্বর এবং প্রতি পেজে কতটি রেকর্ড দেখাতে হবে (rowsPerPage) সেটি প্যারামিটার হিসেবে পাঠানো হয়।
- রেসপন্স সফল হলে, JSON ডেটা প্রসেস করে renderTable() এবং renderPagination() ফাংশন কল হয়, যা টেবিল আপডেট করে এবং Pagination বাটন তৈরি করে।
PHP স্ক্রিপ্ট:
- PHP স্ক্রিপ্ট ইনপুট প্যারামিটার (পেজ এবং rowsPerPage) গ্রহণ করে এবং ডাটাবেসে SQL কুয়েরি চালিয়ে নির্দিষ্ট রেঞ্জের ডেটা ফেচ করে।
- মোট রেকর্ডের সংখ্যা গণনা করে এবং মোট পেজ সংখ্যা নির্ধারণ করে JSON ফরম্যাটে রেসপন্স পাঠানো হয়।

Server Side Pagination এর সুবিধা:

Efficiency: প্রতিবার ডাটাবেস থেকে নির্দিষ্ট সংখ্যক ডেটা ফেচ করা হয়, যা সার্ভার এবং ক্লায়েন্ট উভয়ের পারফরম্যান্স উন্নত করে।
Smooth User Experience: Ajax ব্যবহার করে Pagination পরিচালনা করা হয়, যা পেজ রিফ্রেশ ছাড়াই ডেটা লোড এবং আপডেট করে, ফলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
Scalability: বড় ডাটাবেস এবং বড় ডেটাসেটের সাথে কাজ করার সময় Server Side Pagination কার্যকরী এবং স্কেলেবল সমাধান প্রদান করে।

Content added By

Md. Nasir Uddin (Raju)

উদাহরণ সহ Dynamic Pagination এর উদাহরণ

Dynamic Pagination এমন একটি পদ্ধতি যেখানে ডেটা পেজ রিফ্রেশ ছাড়াই Ajax রিকোয়েস্টের মাধ্যমে ডায়নামিক্যালি লোড এবং আপডেট করা হয়। এটি ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ইন্টারেক্টিভ করে তোলে, বিশেষ করে যখন বড় ডাটাসেটের সাথে কাজ করতে হয়।

উদাহরণ: Dynamic Pagination

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Pagination Example</title>
    <style>
        /* Pagination styling */
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin: 2px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Employee List</h1>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        <!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
    </div>

    <script>
        // বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
        let currentPage = 1;
        const rowsPerPage = 10;

        // পেজ লোড হলে ডেটা লোড করা
        document.addEventListener('DOMContentLoaded', function() {
            fetchData(currentPage);
        });

        // Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
        function fetchData(page) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    renderTable(response.data);
                    renderPagination(response.totalPages, page);
                }
            };

            xhr.send();
        }

        // টেবিল রেন্ডার করার ফাংশন
        function renderTable(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // পেজিনেশন রেন্ডার করার ফাংশন
        function renderPagination(totalPages, currentPage) {
            var pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            for (let i = 1; i <= totalPages; i++) {
                var button = document.createElement("button");
                button.textContent = i;
                if (i === currentPage) {
                    button.disabled = true;
                }
                button.onclick = function() {
                    fetchData(i);
                };
                pagination.appendChild(button);
            }
        }
    </script>
</body>
</html>

২. PHP স্ক্রিপ্ট (fetch_employees.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;

// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
    "data" => $employees,
    "totalPages" => $totalPages
]);

$stmt->close();
$conn->close();
?>

ডাটাবেস সেটআপ

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

HTML এবং JavaScript:

পেজ লোড হলে fetchData() ফাংশন কল হয়, যা Ajax রিকোয়েস্ট পাঠায়।
Ajax রিকোয়েস্ট পাঠানোর সময় বর্তমান পেজ নম্বর এবং প্রতি পেজে কতটি রেকর্ড (rowsPerPage) সেটি প্যারামিটার হিসেবে পাঠানো হয়।
রেসপন্স সফল হলে, JSON ডেটা প্রসেস করে renderTable() এবং renderPagination() ফাংশন কল হয়। এই ফাংশনগুলো টেবিল আপডেট করে এবং Pagination বাটন তৈরি করে।

PHP স্ক্রিপ্ট:

PHP স্ক্রিপ্ট ইনপুট প্যারামিটার (পেজ এবং rowsPerPage) গ্রহণ করে এবং ডাটাবেসে SQL কুয়েরি চালিয়ে ডেটা ফেচ করে।
ডাটাবেস থেকে মোট রেকর্ডের সংখ্যা গণনা করা হয় এবং মোট পেজ সংখ্যা নির্ধারণ করা হয়।
JSON ফরম্যাটে ডেটা এবং পেজ সংখ্যা ক্লায়েন্ট সাইডে রেসপন্স হিসেবে পাঠানো হয়।

Dynamic Pagination এর সুবিধা:

পেজ রিফ্রেশ ছাড়াই ডেটা লোড: Ajax ব্যবহার করে ডেটা লোড করা হয়, যা পেজ রিফ্রেশ ছাড়াই দ্রুত আপডেট হয়।
Responsive এবং Interactive: ডায়নামিক পেজিনেশন ব্যবহার করে ইউজার ইন্টারফেস আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি হয়ে ওঠে।
Server Efficiency: ডাটাবেস থেকে প্রতিবার সীমিত ডেটা ফেচ করা হয়, যা সার্ভারের পারফরম্যান্স উন্নত করে এবং ওয়েব অ্যাপ্লিকেশন স্কেল করতে সাহায্য করে।

Content added By

Md. Nasir Uddin (Raju)

আরও দেখুন...

Ajax এর মাধ্যমে Pagination তৈরি করা (Creating Pagination with Ajax) Ajax এর মাধ্যমে Dynamic Pagination তৈরি Large Data Set এর জন্য Pagination Handling Ajax এবং PHP এর মাধ্যমে Server Side Pagination উদাহরণ সহ Dynamic Pagination এর উদাহরণ

Ajax এর মাধ্যমে Pagination তৈরি করা (Creating Pagination with Ajax)

Ajax এর মাধ্যমে Dynamic Pagination তৈরি

উদাহরণ: Ajax এর মাধ্যমে Dynamic Pagination

১. HTML এবং JavaScript (index.html)

২. PHP স্ক্রিপ্ট (fetch_employees.php)

ডাটাবেস সেটআপ:

প্রোগ্রামটি কিভাবে কাজ করে:

সুবিধা:

Large Data Set এর জন্য Pagination Handling

Large Data Set এর জন্য Pagination Handling এর কী পয়েন্ট:

উদাহরণ: Ajax এর মাধ্যমে Large Data Set এর Pagination Handling

১. HTML এবং JavaScript (index.html)

২. PHP স্ক্রিপ্ট (fetch_employees.php)

ডাটাবেস সেটআপ:

প্রোগ্রামটি কিভাবে কাজ করে:

Large Data Set এর জন্য Ajax Pagination এর সুবিধা:

Ajax এবং PHP এর মাধ্যমে Server Side Pagination

Server Side Pagination এর কী পয়েন্ট:

উদাহরণ: Ajax এবং PHP এর মাধ্যমে Server Side Pagination

১. HTML এবং JavaScript (index.html)

২. PHP স্ক্রিপ্ট (fetch_employees.php)

ডাটাবেস সেটআপ:

প্রোগ্রামটি কিভাবে কাজ করে:

Server Side Pagination এর সুবিধা:

উদাহরণ সহ Dynamic Pagination এর উদাহরণ

উদাহরণ: Dynamic Pagination

১. HTML এবং JavaScript (index.html)

২. PHP স্ক্রিপ্ট (fetch_employees.php)

ডাটাবেস সেটআপ

প্রোগ্রামটি কিভাবে কাজ করে:

Dynamic Pagination এর সুবিধা:

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion